<template>
	<text class="content">
		<view class="section section-0">
			<view class="section-body">
				<view class="top-tab">
					<view :class="`item ${curChartsTab.type === item.type ? 'item__active' : ''}`"
						@click="setCurChartsTab(item)" v-for="item in chartsTabList" :key="item.type">
						{{item.name}}
						<view class="shape"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- <mescroll-uni top="70" bottom="150" ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="{use: false}">
			
		</mescroll-uni> -->
		<view class="section section-1">
			<view class="list">
				<view :class="`item ${expandList.indexOf(item.id) !== -1 ? 'item__expand' : ''}`"
					v-for="(item, index) in list" :key="item.id">
					<view class="parent">
						<view class="action" @click="expandChange(item.id)">
							<view class="iconfont icon-xiangyou1"></view>
						</view>
						<view class="name">
							{{index + 1}}.{{item.project_name}}
						</view>
					</view>
					<view class="child" v-if="expandList.indexOf(item.id) !== -1">
						<view class="wrapper" v-for="item2 in item.children">
							<view class="title">会议材料
								<view>
									15/20
								</view>
							</view>
							<view class="value">
								<view class="record">
									<view class="left">{{item2.dw_name}}</view>
									<view class="right">
										去评分
									</view>
								</view>
								<!-- <view class="record">
									<view class="left">asduhasdoash</view>
									<view class="right preview">
										查看评分
									</view>
								</view>
								<view class="record">
									<view class="left">asduhasdoash</view>
									<view class="right">
										去评分
									</view>
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="record" @click="go()">
				<view class="iconfont icon-lishijilu_huaban"></view>
				<text>历史记录</text>
			</view>
			<view class="submit">
				提交施工管理评分
			</view>
		</view>
	</text>
</template>

<script>
	import { scoreListApi } from '@/api/statistics.js';
	export default {
		data() {
			return {
				showHistory: false,
				chartsTabList: [{
						name: '施工管理',
						type: '1'
					},
					{
						name: '监理管理',
						type: '2'
					},
					{
						name: '设计管理',
						type: '3'
					},
					{
						name: '分包管理',
						type: '4'
					},
				],
				curChartsTab: {
					name: '施工管理',
					type: '1'
				},
				list: [],
				expandList: [],
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				pageSize: 20,
			}
		},
		onReady() {
			this.fetchData();
			
		},
		methods: {
			async fetchData() {
				uni.showLoading({
					title: '加载中...'
				})
				const {data} =  await scoreListApi({
					...this.form,
				});
				uni.hideLoading();
				if (data.code === 1 || data.code === 200) {
					const list = [];
					for (let key in data.data.group_list) {
						list.push({...data.data.group_list[key]})
					}
					this.list = list; //追加新数据
				}
				
			},
			go() {
				uni.navigateTo({
					url: '/pages/work/manager/construction/safety/evaluate/history/index'
				})
			},
			expandChange(id) {
				const idx = this.expandList.indexOf(id);
				if (idx !== -1) {
					this.expandList.splice(idx, 1);
				} else {
					this.expandList.push(id);
				}
			},
			setCurChartsTab(item) {
				this.curChartsTab = item;
				this.fetchData();
				// this.mescroll.resetUpScroll();
				// this.mescroll.scrollTo(0,0);
			},
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				const {data} =  await scoreListApi({
					...this.form,
					page: page.num,
					pageSize: this.pageSize
				});
				
				if (data.code === 1 || data.code === 200) {
					const list = [];
					for (let key in data.data.data) {
						list.push({...data.data.data[key]})
					}
					// 接口返回的当前页数据列表 (数组)
					let curPageData = list; 
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length; 
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.data.data.last_page; 
					//设置列表数据
					if(page.num == 1) this.list = []; //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage); 
					setTimeout(()=>{
						this.mescroll.endSuccess(curPageLen);
					},20);
				} else{
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.footer{
	
		box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
		width: 100%;
		height: 150rpx;
		background-color: #ffffff;
		position: fixed;
		bottom:0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.record{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.icon-lishijilu_huaban{
				font-size: 43rpx;
				color: #3b3c40;
			}
			text{
				font-size: 26rpx;
				color: #3b3c40;
				margin-top: 10rpx;
			}
		}
		.submit{
			width: 287rpx;
			height: 83rpx;
			background-color: #1534ce;
			border-radius: 20rpx;
			letter-spacing: 4rpx;
			color: #ffffff;
			font-size: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
	}
	.section-1{
		.list{
		
			width: 670rpx;
			box-sizing: border-box;
			margin-left: 40rpx;
			padding-top: 20rpx;
			.item {
				width: 100%;
				.parent {
					width: 100%;
					@include clear();
					.name {
						width: calc(100% - 50rpx);
						line-height: 30rpx;
						padding: 26rpx 0;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 2rpx;
						color: #3b3c40;
						float: left;
						word-break: break-all;
					}
		
					.action {
						float: left;
						width: 32rpx;
						margin-right: 18rpx;
						height: 100%;
						line-height: 82rpx;
						text-align: center;
						color: #3b3c40;
		
						.iconfont {
							font-size: 32rpx;
							transition: 0.2s ease;
							transform: rotate(90deg);
						}
		
					}
				}
		
				.child {
					width: 100%;
					.wrapper{
						width: 100%;
						border-radius: 35rpx;
						background-size: cover;
						background-repeat: no-repeat;
						overflow: hidden;
						box-sizing: border-box;
						box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
						padding: 28rpx 40rpx;
						margin-bottom: 24rpx;
						.title {
							width: 100%;
							height: 30rpx;
							line-height: 30rpx;
							border-bottom: solid 3rpx #f2f2f0;
							font-size: 26rpx;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: #8497ac;
							padding-bottom: 28rpx;
							view {
								float: right;
								font-size: 26rpx;
								color: #8497ac;
								font-weight: normal;
								.iconfont{
									font-size: 26rpx;
									margin-right: 5rpx;
								}
							}
						}
					
						.value {
							width: 100%;
							padding-top: 28rpx;
							.record{
								width: 100%;
								@include clear();
								margin-bottom: 25rpx;
								.left{
									width: calc(100% - 120rpx);
									float: left;
									font-size: 26rpx;
									line-height: 36rpx;
									color: #3b3c40;
								}
								.right{
									float: right;
									width: 110rpx;
									height: 36rpx;
									line-height: 36rpx;
									background-color: #1534ce;
									border-radius: 17rpx;
									font-size: 22rpx;
									text-align: center;
									color: #fefefe;
								}
								.preview{
									background-color: #9ccbf5;
								}
								&:last-child{
									margin-bottom: 0;
								}
							}
						}
						
					}
				}
			}
		
			.item__expand {
				.parent {
					.action {
						.iconfont {
							transform: rotate(-90deg);
						}
					}
				}
			
			}
		
		}
	}
	.section-0{
		width: 100%;
		background-color: #3a5df5;
		.section-body{
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 0 40rpx;
			padding-top: 18rpx;
			.top-tab{
				width: 100%;
				height: 52rpx;
				line-height: 52rpx;
				display: flex;
				justify-content: space-between;
				
				border-bottom: solid 3rpx #f2f2f0;
				.item {
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 50rpx;
					letter-spacing: 0rpx;
					color: #d8d8d5;
					position: relative;
			
					.shape {
						opacity: 0;
						transform: translateY(6rpx);
						position: absolute;
						bottom: -6rpx;
						width: 100%;
						height: 8rpx;
						background-color: #1534ce;
						border-radius: 8rpx;
						transition: 0.3s ease;
					}
				}
			
				.item__active {
					color: #3b3c40;
			
					.shape {
						opacity: 1;
						transform: translateY(0rpx);
					}
				}
			}
		}
	}
</style>
